<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }
</style>

<body>
<div class="ok-body">
    <input type="hidden" id="showDeviceDamage" th:value="${damageDevice}">
    <div class="layui-tab" lay-filter="tabFilter">
        <ul class="layui-tab-title">
            <li class="layui-this">预警零件</li>
            <li>重复故障现象</li>
            <li>重复故障设备</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">

                <blockquote class="layui-elem-quote layui-text">
                    请加强对下列零件做好更换准备 !!!
                </blockquote>
                <div class="layui-row" style="margin-top: 15px">
                    <form class="layui-form" action="">

                        <label class="layui-form-label">查询条件</label>

                        <div class="layui-input-inline" >
                            <select   id = 'select' lay-filter="select">
                                <option value="7">一周</option>
                                <option value="3">三天</option>
                                <option value="1">一天</option>
                            </select>
                        </div>
                    </form>
                </div>

                <hr class="layui-bg-orange">
                <table class="layui-hide" id="deadLineComponent" lay-filter="deadLineComponent"></table>
                <!--分页Div-->
                <div id="pageDiv"></div>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" action="">
                    <label class="layui-form-label" style="width: 120px">选择时间区间</label>
                    <div class="layui-input-inline">
                        <input type="text" id="faultTimeDuring" placeholder="选择起始时间范围" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn  layui-btn-normal" style="margin-left: 10px" lay-submit lay-filter="duplicateFault">
                        搜索
                    </button>
                </form>

                <div class="layui-row " style="margin-top: 15px">
                    <div class="layui-col-md12">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend> 以下设备的现象已经重复发生(本月)!!!</legend>
                        </fieldset>
                        <!--显示重复发生的故障现象-->
                        <table class="layui-hide" id="faultSymptom" lay-filter="faultSymptom"></table>
                        <div id="faultSymptomPageDiv" style="display:none;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" action="">
                    <label class="layui-form-label" style="width: 120px">选择时间区间</label>
                    <div class="layui-input-inline">
                        <input type="text" id="faultDeviceDuring" placeholder="选择起始时间范围" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn  layui-btn-normal" style="margin-left: 10px" lay-submit lay-filter="deviceDamage">
                        搜索
                    </button>
                </form>

                <div class="layui-row " style="margin-top: 15px">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend> 以下设备以发生重复故障(本月)!!!</legend>
                        </fieldset>
                        <!--显示重复发生的故障现象-->
                        <table class="layui-hide" id="faultDevice" lay-filter="faultDevice"></table>
                        <div id="faultDevicePageDiv"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    var myComponentTable;
    layui.use(['table','laypage','form','element', 'laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var laydate = layui.laydate;

        var showDevice=$('#showDeviceDamage').val() == '1'?true:false;
        if(showDevice === true){
            $('ul.layui-tab-title').find('li:first').removeClass('layui-this');
            $('ul.layui-tab-title').find('li:last').addClass('layui-this');
            $('div.layui-tab-content').find('div.layui-tab-item:first').removeClass('layui-show');
            $('div.layui-tab-content').find('div.layui-tab-item:last').addClass('layui-show');
            form.render();
        }

        var myComponentTableRenderObject = {
            elem: '#deadLineComponent'
            ,title: '快到使用期限的零件'
            ,requestUrl:'/home/deadLineComponentDataGrid'   //使用自定义的请求url，不使用默认的，所以可以不要tableName这个属性
            ,searchCol:''
            ,searchValue:'7'
            ,cols: [[
                {field:'name', title:'配件规格名称',align:'center'}
                ,{field:'deviceNumber', title:'所属设备编号',align:'center'}
                ,{field: 'description', title: '描述信息', align: 'center'}
                ,{field: 'unit', title: '单位', align: 'center',width:60}
                ,{field: 'typeName', title: '类型', align: 'center',minWidth:116}
                ,{field:'partName', title:'所在部位',align:'center'}
                ,{field:'startTime', title:'启用时间',align:'center',templet:function (d) {
                        return JJZ.FormatDate(d.startTime,'yyyy-MM-dd');
                    }}
                ,{field:'remainDays', title:'预计剩余天数',align:'center'}
                ,{title: '备件等级', align: 'center',minWidth:87, templet: function (d) {
                        if (d.level === 1) {
                            return '关键备件';
                        } else if (d.level === 2) {
                            return '普通备件';
                        } else {
                            return '暂无';
                        }
                    }
                }
                ,{title: '操作', align: 'center',minWidth:87, templet: function (d) {
                        return '<a href="javascript:changeDeviceComponent(' + d.id + ')" class="layui-table-link">更换</a>';
                    }
                }
            ]]
        };
        myComponentTable = new JJZ.MyTable(myComponentTableRenderObject);
        //快过期零件的下拉框监听器
        form.on('select(select)', function(data){
            var searchCol = data.value;
            myComponentTableRenderObject.searchCol = searchCol;
            var searchValue = data.value;
            myComponentTableRenderObject.searchValue = searchValue;
            myComponentTable.render();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //以下是重复故障信息
        var now = new Date();
        var startTime = JJZ.FormatDate(now,'yyyyMM');
        var initParam = 'startTime='+startTime+'&endTime='+startTime;

        //故障现象区间
        laydate.render({
            elem: '#faultTimeDuring'
            , type: 'month'
            , range: true
            // ,max:JJZ.getNowFormatDate()
            , format: 'yyyyMM'
        });
        //故障设备
        laydate.render({
            elem: '#faultDeviceDuring'
            , type: 'month'
            , range: true
            // ,max:JJZ.getNowFormatDate()
            , format: 'yyyyMM'
        });

        var myFaultSymptomRenderObject = {
            elem: '#faultSymptom'
            ,title: '重复故障现象'
            // ,width:450
            ,height:430
            ,limit: 999
            ,pageDiv:'faultSymptomPageDiv'
            ,requestUrl:'/home/faultSymptom'   //使用自定义的请求url，不使用默认的，所以可以不要tableName这个属性
            ,initParam:initParam   //初始化的请求参数 ，不需要加上分页的设置参数 a=1&b=2;
            ,page:false
            ,cols: [[
                {field:'modelName', title:'设备类型',align:'center',minWidth:98}
                // ,{field:'lineName', title:'生产线',align:'center',width:113}
                ,{field:'deviceName', title:'设备名称',align:'center',minWidth:115}
                ,{field:'deviceNumber', title:'设备编号',align:'center',minWidth:87}
                ,{field:'symptom', title:'故障现象',align:'center',minWidth:127}
            ]]
        };
        var myFaultSymptomTable = new JJZ.MyTable(myFaultSymptomRenderObject);

        //重复故障 搜索按钮监听
        form.on('submit(duplicateFault)', function(data){
            var time = $('#faultTimeDuring').val().replace(/\s*/g,"");
            var timeArr = time.split("-");
            var startTime = timeArr[0];
            var endTime = timeArr[1];
            var param = 'startTime='+startTime+'&endTime='+endTime;
            myFaultSymptomRenderObject.initParam = param;
            myFaultSymptomTable.render();
            return false;
        });

        /***********************故障设备***************************/

        var myDamageDeviceTableRenderObject = {
            elem: '#faultDevice'
            ,title: '重复故障的设备'
            ,requestUrl:'/home/repeatDamageDevice'   //使用自定义的请求url，不使用默认的，所以可以不要tableName这个属性
            ,pageDiv:'faultDevicePageDiv'
            ,initParam:initParam   //初始化的请求参数 ，不需要加上分页的设置参数 a=1&b=2;
            ,cols: [[
                {field:'modelName', title:'设备类型',align:'center'}
                ,{field:'deviceName', title:'设备名称',align:'center'}
                ,{field: 'deviceNumber', title: '设备编号', align: 'center'}
                ,{field: 'count', title: '故障次数', align: 'center'}
            ]]
        };
        var myDamageDeviceTable = new JJZ.MyTable(myDamageDeviceTableRenderObject);


        //重复故障设备
        form.on('submit(deviceDamage)', function(data){
            var time = $('#faultDeviceDuring').val().replace(/\s*/g,"");
            var timeArr = time.split("-");
            var startTime = timeArr[0];
            var endTime = timeArr[1];
            var param = 'startTime='+startTime+'&endTime='+endTime;
            myDamageDeviceTableRenderObject.initParam = param;
            myDamageDeviceTable.render();
            return false;
        });
    });

    function changeDeviceComponent(deviceComponentId) {
        JJZ.requestData('/deviceComponent/change', 'deviceComponentId=' + deviceComponentId, function (hasPermission) {
            myComponentTable.render();
            layer.msg('更换配件成功', {icon: 1});
        })
    }

</script>
</body>
</html>